<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css3鼠标悬停图片动画特效库Izmir|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" href="assets/css/just-the-docs.css">
    <link rel="stylesheet" href="assets/css/izmir.css">
    <link rel="stylesheet" href="assets/css/docs.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/fa-solid.min.css">
    <style>
    	.page-content{
    		width: 900px;
    		margin: 0 auto;
    	}
    </style>
</head>
<body>


<h3 id="border-classes">Border Classes</h3>

<div class="col-3">
  <div class="col-item">
    <figure class="c4-izmir c4-border-center" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-center</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-vert" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-vert</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-horiz" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-horiz</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-top" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-top</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-bottom" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-bottom</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-left" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-right" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-top-left" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-top-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-top-right" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-top-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-bottom-left" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-bottom-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-bottom-right" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-bottom-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-corners-1" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-corners-1</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-corners-2" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-corners-2</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-cc-1" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-cc-1</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-ccc-1" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-ccc-1</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-cc-2" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-cc-2</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-ccc-2" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-ccc-2</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-cc-3" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-cc-3</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-ccc-3" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-ccc-3</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-fade" tabindex="0">
      <img src="assets/images/image03.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-fade</textarea>
  </div>
</div>

</body>
</html>